<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--表单form

action：表单提交的位置，可以是网站也可以是一个请求处理的地址
method：POST,GET提交方式
    get方式提交：我们可以在url中看到我们的提交的信息不安全
    post：比较安全，也可以用于传输大文件
value:默认初始值
maxlength:最长能写几个字符
size=30 文本框长度
-->

<form action="1.html" method="get">
    <!--文本输入框-->
    <p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>

    <!--密码框-->
    <p>密码：<input type="password" name="pwd"></p>


    <!--单选框标签
    input type="radio"
    value:单选框的值
    name:表示组
    checked 默认选中
    -->
    <p>
        <input type="radio" value="boy" name="sex" checked> 男
        <input type="radio" value="girl" name="sex"> 女
    </p>

    <!--多选框-->
    <p>爱好
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <!--按钮
    input type="button" 普通按钮
    input type="image"  图像按钮
    input type="submit" 提交按钮
    input type="reset" 重置
    -->
    <p>按钮
        <input type="button" name="btn1" value="点击按钮">
       <!----input type="image" src="../resource/image/1.jpg"-->
    </p>

    <!--下拉框
    -->
    <p>国家：
        <select name="country">
            <option value="china" disabled>中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="yindu">印度</option>
        </select>
    </p>

    <!--文本框
    cols="50"
    rows="10"
    -->

    <label for="mark">你点我</label>

    <p>反馈：
        <textarea name="textarea" id="mark"cols="50" hidden rows="10"></textarea>
    </p>


    <!--文件域-->
    <p>
        <input type="file" name="file">
        <input type="button" value="上传" name="upload">
    </p>

    <!--邮件验证-->
    <p>邮箱
        <input type="email" name="email">
    </p>

    <!--URL-->
    <p>URL:
        <input type="url" name="url" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

    <!--数字-->
    <p>商品数量
        <input type="number" name="num" max="100" min="0" step="1">
    </p>

    <!--滑块-->
    <p>音量
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

    <!--搜索-->
    <p>搜索
        <input type="search" name="search">
    </p>

    <p>
        <input type="submit" >
        <input type="reset" value="image">
    </p>
</form>

</body>
</html>